<template>
  <div class='app-container'>
    <a-layout style="height: 100%;">
      <a-layout-content>
        <div ref="graphContainer" class="parent-wrapper" />
      </a-layout-content>
      <a-layout-sider style="background: #6cffad7d;overflow: auto;">
        <img class="imagesimg" v-for="(item, i) in imgtool" :key="i" :src="item" @click="createimg(i)" />
      </a-layout-sider>
    </a-layout>
  </div>
</template>

<script>
import mxgraph from '@utils/init.js';
import imgtool from '@/assets/tool/img/index.js'

import keyDown from '@utils/initKeyHandler.js'

export default {
  name: '',
  module_index: 600,
  module_name: '工具栏·图片',
  data() {
    return {
      imgtool,
      graph: null,
      parent: null,
      num: 0,
      // 构造一个事件处理程序，该处理程序使用橡皮筋选择来选择图中的矩形区域。
      rubberBand: null
    };
  },
  created() { },
  mounted() {
    this.init();
    this.initCellStyle();
    keyDown(this.graph);
  },
  methods: {
    init() {
      // 创建全局容器
      this.graph = new mxGraph(this.$refs.graphContainer);

      // 创建全局父元素
      this.parent = this.graph.getDefaultParent();

      mxEvent.disableContextMenu(this.$refs.graphContainer);    // 右键上下文禁用
      this.rubberBand = new mxRubberband(this.graph)            // 拖拽框选
    },
    initCellStyle() {
      // 设置可连接，也就是可以直接用鼠标从单元格的中心拖拽，然后延伸出一条指向位置随鼠标拖拽而变动的箭头
      this.graph.setConnectable(true);

      // getStylesheet:返回定义样式的mxStylesheet。
      // putCellStyle:在样式中存储给定名称下的键、值对的给定映射。参数一：要存储的样式的名称；参数二：定义样式的键、值对。
      this.graph.getStylesheet().putCellStyle('mystyle',{
        [mxConstants.STYLE_SHAPE]: mxConstants.SHAPE_LABEL, // 不设置这个属性，背景图出不来
        [mxConstants.STYLE_PERIMETER]: mxPerimeter.RectanglePerimeter,
        [mxConstants.STYLE_ROUNDED]: true,
        [mxConstants.STYLE_ARCSIZE]: 6, // 设置圆角程度

        [mxConstants.STYLE_STROKECOLOR]: '#ebb862',             // 边框色
        [mxConstants.STYLE_FONTCOLOR]: '#333333',               // 字体色
        [mxConstants.STYLE_FILLCOLOR]: '#FFFFFF',               // 背景色
        [mxConstants.STYLE_LABEL_BACKGROUNDCOLOR]: '#fff',   // 字体背景色

        [mxConstants.STYLE_ALIGN]: mxConstants.ALIGN_CENTER,
        [mxConstants.STYLE_VERTICAL_ALIGN]: mxConstants.ALIGN_TOP,
        [mxConstants.STYLE_IMAGE_ALIGN]: mxConstants.ALIGN_CENTER,
        [mxConstants.STYLE_IMAGE_VERTICAL_ALIGN]: mxConstants.ALIGN_TOP,

        [mxConstants.STYLE_IMAGE]: this.imgtool[5],
        [mxConstants.STYLE_IMAGE_WIDTH]: '100',
        [mxConstants.STYLE_IMAGE_HEIGHT]: '100',
        [mxConstants.STYLE_SPACING_TOP]: '110',
        [mxConstants.STYLE_SPACING]: '8'
      })
    },
    createimg(i) {
      this.graph.insertVertex(this.parent,null,i,Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),120,150,'mystyle;image=' + this.imgtool[i]);
      ++this.num;
    },
  }
};
</script>

<style>

.imagesimg {
  width: 3vw;
  height: 3vw;
  cursor: pointer;
}
.ant-layout-sider-children {
}
</style>